<template>
    <div style="min-width:809px">
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left">
                    banner列表
                </div>
                <el-button style="margin-left:auto;" @click="dialogVisible=true" type="primary">新增</el-button>
            </div>
            <div class="operation-box">
                <el-button :type="paging.type==1?'primary':''" @click="paging.type=1;handleCurrentChange(1)">图片</el-button>
                <el-button :type="paging.type==2?'primary':''" @click="paging.type=2;handleCurrentChange(1)">视频</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column width="60px" type="selection"></el-table-column>
                <el-table-column prop="name" :label="paging.type==2?'视频':'banner'" :min-width="paging.type==2?'300':'250'">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.type==1" class="image-thumbnail" :src="scope.row.url" fit="cover" :preview-src-list="[scope.row.url]">
                        </el-image>
                        <video v-show="scope.row.type==2" controls :src="scope.row.url"></video>
                        <!-- <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div> -->
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="上传时间" min-width="220">
                </el-table-column>
                <el-table-column prop="address" fixed="right" width="109" label="操作">
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="setRow(1,scope.row)">编辑</span>
                        <span class="tab-table-text" @click="setRow(2,scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="ruleForm.id?'修改':'新增'+'banner'" :visible.sync="dialogVisible" width="700px" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="banner：" prop="url" ref="url">
                    <el-radio-group @change="change" v-model="ruleForm.type">
                        <el-radio :label="1">图片</el-radio>
                        <el-radio :label="2">视频</el-radio>
                    </el-radio-group>
                    <uploadingImg width="120px" :mode="ruleForm.type==1?'image':'video'" @verify="verify('url',$event)" :video.sync="ruleForm.url" :img-list.sync="ruleForm.url"></uploadingImg>
                </el-form-item>
                <!-- <el-form-item label="跳转连接：" prop="url">
                <el-input v-model="ruleForm.url"></el-input>
            </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false;handleClose()">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import UploadingImg from '../../components/UploadingImg'
export default {
    components: {
        UploadingImg
    },
    data() {
        var url = (rule, value, callback) => {
            // 图片验证
            if (!this.ruleForm.url) { //hasFmt设置为true/false
                callback(new Error(this.ruleForm.type == 1 ? "请上传图片!" : '请上传视频'));
            } else {
                callback();
            }
        }
        return {
            isActive: true,
            paging: {
                type: 1,
                page: 1,
                total: 400,
                limit: 10,
            },
            ruleForm: {
                type: 1,//1:图片 2:视频
                url: '',
            },
            rules: {
                url: { required: true, validator: url },
            },
            dialogVisible: false,
            isBtn: false,
            loading: false,
            tableData: []
        };
    },
    created() {
        this.getDataList();
    },
    methods: {
        change() {
            this.ruleForm.url = '';
            this.$refs['ruleForm'].validate(valid => { });
        },
        verify(hasFmt, sta) {
            if (sta) {
                this.$refs[hasFmt].validate();
            } else this.$refs[hasFmt].clearValidate();
        },
        setRow(type, row) {
            if (type == 1) {
                this.dialogVisible = true;
                setTimeout(() => {
                    this.ruleForm = Object.assign({}, row);
                }, 100);
            } else {
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该banner吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            let { code, data } = await this.$Http.delAd({ ids: row.id })
                            if (code) {
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(() => { });
            }
        },
        setAd() {
            this.$refs['ruleForm'].validate(async valid => {
                if (!valid) return;
                this.isBtn = true;
                let { code, data } = await this.$Http.setAd(this.ruleForm);
                this.isBtn = false;
                if (code) {
                    this.$message.success(this.ruleForm.id ? '修改' : '添加' + "成功!");
                    this.dialogVisible = false;;
                    this.handleClose()
                    this.handleCurrentChange(1)
                }
            })
        },
        handleClose(dom) {
            dom && dom();
            this.$refs['ruleForm'].resetFields();
        },
        async getDataList() {
            this.loading = true;
            let { code, data } = await this.$Http.getAd(this.paging)
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getDataList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getDataList()
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    max-width: 300px;
    max-height: 180px;
}
video {
    max-width: 300px;
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}
</style>